<!--设备列表与维护页面-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备名称" prop="devName">
        <el-input
          v-model="queryParams.devName"
          placeholder="请输入设备名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备类型" prop="type">
        <el-input
          v-model="queryParams.type"
          placeholder="请输入设备类型"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="设备状态"
          clearable
          style="width: 240px">
          <el-option
            v-for="dict in dict.type.iot_device_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"  />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['erh-iot:device:add']"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['erh-iot:device:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="deviceList">
      <el-table-column label="设备名称" align="center" prop="devName" :show-overflow-tooltip="true"/>
      <el-table-column label="IMEI码" align="center" prop="imei"/>
      <el-table-column label="IMSI码" align="center" prop="imsi"/>
      <el-table-column label="设备模板" align="center" prop="devMId">
        <template slot-scope="scope">
          <span>{{getDevM_name(scope.row.devMId)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="部署经度" align="center" prop="longitude"/>
      <el-table-column label="部署纬度" align="center" prop="latitude"/>
      <el-table-column label="设备型号" align="center" prop="type"/>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.iot_device_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-timer"
            @click="handleDetect(scope.row)"
          >自检</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['erh-iot:device:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['erh-iot:device:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
      <!--下面是人员绑定区域-->
      <el-divider>人员绑定</el-divider>
      <el-form :model="user_queryParams" ref="user_queryForm" size="small" :inline="true">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd_user"
                     v-hasPermi="['system:user:add']">新增用户</el-button>
        </el-form-item>
        <span style="padding:20px;"></span>
        <el-form-item label="用户名称" prop="nickName">
          <el-input
            v-model="user_queryParams.nickName"
            placeholder="请输入用户名称"
            style="width:138px"
            clearable
            @keyup.enter.native="handleQuery_user"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="user_queryParams.phonenumber"
            placeholder="请输入手机号码"
            style="width:138px"
            clearable
            @keyup.enter.native="handleQuery_user"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" size="mini" @click="handleQuery_user">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery_user">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-table @row-click="clickUserRow" :data="userList" height="260px">
          <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
          <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
        </el-table>
        <pagination
          v-show="user_total>0"
          :total="user_total"
          :page.sync="user_queryParams.pageNum"
          :limit.sync="user_queryParams.pageSize"
          @pagination="getUserList" />
      </el-row>
      <el-divider>人员绑定结果</el-divider>
      <el-row v-if="deviceOwnerList.length>0" v-for="(item,index) in deviceOwnerList" :key="index">
        <!-- <span style="padding: 20px;"></span>{{item.remark.split('#')[0]}}
        <span style="padding: 20px;"></span>{{item.remark.split('#')[1]}}
        <span style="padding: 20px;"></span><span @click="delUser(index)">移除</span> -->
        <div class="user_line">
          <div class="user_item" style="width:40%;text-align:right">{{item.remark==null?'暂无姓名':item.remark.split('#')[0]}}</div>
          <div class="user_item">{{item.remark==null?'暂无电话':item.remark.split('#')[1]}}</div>
          <div class="user_item" style="width:40%;text-align:left;color:red;" @click="delUser(index)">移除</div>
        </div>
      </el-row>
      <div class="space_line"></div>
      <el-divider>设备基本信息</el-divider>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="devName">
              <el-input v-model="form.devName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="type">
              <el-input v-model="form.type" placeholder="请输入设备类型" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备IMEI编码" prop="imei">
              <el-input v-model="form.imei" placeholder="请输入设备IMEI编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIM卡IMSI编码" prop="imsi">
              <el-input v-model="form.imsi" placeholder="请输入SIM卡IMSI编码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部署经度" prop="longitude">
              <!-- <el-input v-model="form.longitude" placeholder="请输入部署经度" /> -->
              <el-input v-model="model.lng" placeholder="请点选部署经度" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部署纬度" prop="latitude">
              <!-- <el-input v-model="form.latitude" placeholder="请输入部署纬度" /> -->
              <el-input v-model="model.lat" placeholder="请点选部署纬度" :readonly="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider>点击地图获取经纬度</el-divider>
        <div ref="map">
          <!--地图实例-->
          <baidu-map
            class="bm-view"
            :scroll-wheel-zoom="true"
            :center="location"
            :zoom="zoom"
            @ready="createMap"
            ak="xxx" >
            <!--地图显示-->
            <bm-view style="width:100%; height:400px;flex:1"></bm-view>
            <!-- 标记点组件 -->
            <bm-marker :position="{lng: model.lng, lat: model.lat}"/>
            <!--地址搜索-->
            <bm-control :offset="{width: '10px', height: '10px'}">
              <bm-auto-complete v-model="model.address" :sugStyle="{zIndex: 999999}">
                <!-- <input type="text" placeholder="请输入搜索关键字" class="map_serach_input"> -->
                <el-input v-model="model.address" type="text" style="width:300px" placeholder="请输入地名关键字" clearable/>
              </bm-auto-complete>
            </bm-control>
            <!--搜索后自动显示结果点-->
            <bm-local-search :keyword="model.address" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
          </baidu-map>
        </div>
        <div class="space_line"></div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部署地址" prop="address">
              <el-input v-model="form.address" type="textarea" placeholder="请输入部署地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.iot_device_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备模板" prop="devMId">
              <el-select style="width: 100%"
                  v-model="form.devMId"
                  @change="getSelect_name_value(form.devMId)"
                  placeholder="请选择设备模板">
                <el-option
                  v-for="item in deviceMouldList"
                  :key="item.devMId"
                  :label="item.devMName"
                  :value="item.devMId"  />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--下面是根据模板下拉动态加载的控件-->
        <!-- <el-row v-for="(item, index) in form.extDeviceInfoDescList" :key="index"> -->
        <el-row v-if="extDeviceInfoDescList.length>0" v-for="(item,index) in extDeviceInfoDescList" :key="index">
          <el-col :span="8">
            <el-form-item :label="item.name" label-width="200px">
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="" prop="value" label-width="0px">
              <!-- <el-input v-model="form.extDeviceInfoDescList[index].value" placeholder="请输入" /> -->
              <el-input v-model="item.value" placeholder="非必要不要填" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设备轮询自检弹框 -->
    <el-dialog :title="title_timer" :visible.sync="open_timer" width="60%" append-to-body @close="cancel_timer">
      <div class="line1">请点击设备的自检消音按钮</div>
      <div class="line2" v-if="isDetected">已检测到！</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_timer()">{{isDetected==true?'关闭':'中断'}}</el-button>
      </div>
    </el-dialog>

    <!--添加用户弹框-->
    <el-dialog :title="title_addUser" :visible.sync="open_addUser" width="600px" append-to-body @close="cancel_addUser">
      <el-form ref="form_addUser" :model="form_addUser" :rules="rules_addUser" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form_addUser.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="form_addUser.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="form_addUser.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form_addUser.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item  label="用户名称" prop="userName">
              <el-input v-model="form_addUser.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户密码" prop="password">
              <el-input v-model="form_addUser.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form_addUser.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form_addUser.status">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="form_addUser.postIds" multiple placeholder="请选择岗位">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIds">
              <el-select v-model="form_addUser.roleIds" multiple placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form_addUser.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm_addUser">确 定</el-button>
        <el-button @click="cancel_addUser">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {listDevice,getDevice,delDevice,addDevice,updateDevice,exportDeviceList,listDeviceMould,getDeviceMould} from "@/api/business/device";
import {listUser,getUser,addUser,deptTreeSelect} from "@/api/system/user";
import {listEvent,getEvent} from "@/api/business/event";
import {BaiduMap,BmView,BmMarker,BmControl,BmAutoComplete,BmLocalSearch} from "vue-baidu-map";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Device",
  dicts: ['iot_device_status','sys_normal_disable','sys_user_sex'],
  components: {
    BaiduMap,
    BmMarker,
    BmView,
    BmControl,
    BmAutoComplete,
    BmLocalSearch,
    Treeselect,
  },
  data() {
    var checkLongitude=(rule,value,callback)=>{
      setTimeout(()=>{
        if(value<-180){
          callback(new Error('经度范围在-180到180之间'));
        }else if(value>180){
          callback(new Error('经度范围在-180到180之间'));
        }else {
          callback();
        }
      }, 100);
    };
    var checkLatitude=(rule,value,callback)=>{
      setTimeout(()=>{
        if(value<-90){
          callback(new Error('纬度范围在-90到90之间'));
        }else if(value>90){
          callback(new Error('纬度范围在-90到90之间'));
        }else {
          callback();
        }
      }, 100);
    };
    return {
      loading: true, //遮罩层
      showSearch: true, //显示搜索条件
      total: 0, //总条数
      deviceList: [], //设备表格数据
      deviceMouldList: [], //设备模板下拉数据填充
      title: "", //弹出层标题
      open: false, //是否显示弹出层
      queryParams: { //查询参数
        pageNum: 1,
        pageSize: 10,
        devName: undefined, //设备名称
        type: undefined, //设备型号
        status: undefined, //设备状态
      },
      form: { //表单参数
        extDeviceInfoDescList: [], //模板键值对数组
        deviceOwnerList: [], //绑定的用户集合
        // longitude: 117.414961, //经度
        // latitude: 40.051539, //纬度
        longitude: "", //经度
        latitude: "", //纬度
        status: "able", //默认可用
      },
      extDeviceInfoDescList: [],  //用于动态加载模板键值对的独立的循环变量（与form中的同名集合是一个东西）
      deviceOwnerList: [], //用于动态加载绑定或是选中人员的独立的循环变量（与form中的同名集合是一个东西）

      /***********************选择用户相关变量****************************/
      //新增用户
      form_addUser: {}, //添加用户的表单参数
      title_addUser: "", //添加用户弹出层标题
      open_addUser: false, //是否显示弹出层
      deptOptions: undefined, //部门树选项
      initPassword: undefined, //默认密码
      postOptions: [], //岗位选项
      roleOptions: [], //角色选项

      //用户列表
      user_total: 0, //总条数
      userList: [], //用户列表
      user_queryParams: { //查询参数
        pageNum: 1,
        pageSize: 10,
        nickName: undefined,
        phonenumber: undefined
      },
      rules_addUser: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        roleIds: [
          { required: true, message: "角色不能为空", trigger: "blur" }
        ],
      },

      rules: { //表单校验
        devName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "设备类型不能为空", trigger: "blur" }
        ],
        imei: [
          { required: true, message: "设备IMEI编码不能为空", trigger: "blur" }
        ],
        imsi: [
          { required: true, message: "SIM卡IMSI编码不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择状态", trigger: "blur" },
        ],
        longitude: [
        	{ pattern: /^-?\d+\.?\d*$/, message: '请输入正确经度数字', trigger: 'blur' },
          { validator: checkLongitude, trigger: 'blur' }
        ],
        latitude: [
        	{ pattern: /^-?\d+\.?\d*$/, message: '请输入正确纬度数字', trigger: 'blur' },
          { validator: checkLatitude, trigger: 'blur' }
        ],
      },

      //设备自检定时器弹出层相关变量
      countdown_num: 30, //自检倒计时 （备用）
      title_timer: "", //自检弹框标题
      open_timer:false, //是否显示定时器弹层（自检弹框是否显示）
      isDetected:false, //当轮询接口有返回时，用此接收，并显示到弹层上，同时关闭定时器
      int_timer: "", //终止定时器控制变量
      msg: "设备自检中......", //“已检测到！”  “30秒内未检测到！”  “设备自检中......” （备用）

      //地图相关
      location: { //地图显示的中心坐标 (默认为蓟州区政府)
        lng: 117.414961,
        lat: 40.051539,
      },
      model: {
        // lng: 117.414961,
        // lat: 40.051539,
        lng: "",
        lat: "",
        address: "",  //自动搜索时的地址输入
      },
      zoom: 15, //缩放，在市区15基本上就可以看附近的一些街道了，在蓟州区需要调整为16

      BMap:null, //地图初始化测试用
      map:null,

      //在此之上补充变量
    };
  },
  created() {
    this.getList_DeviceMould(); //取模板集合
    this.getList(); //取设备集合

    //取用户初始化数据
    this.getDeptTree();
    this.getConfigKey("sys.user.initPassword").then(response => {
      console.log("created中的getConfigKey调用返回值==",response);
      this.initPassword = response.msg;
    });
  },
  methods: {
    /*******************************以下是设备相关方法************************************/
    //查询设备列表
    getList(){
      this.loading = true;
      listDevice(this.queryParams).then(response => {
          console.log("获取设备列表接口返回值==",response);
          this.deviceList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    //(设备列表主页面)搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //(设备列表主页面)重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //(设备列表主页面)新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备";
      this.getUserList(); //加载用户表格

      this.initMap(117.414961,40.051539,"add");//初始化地图
    },
    //(设备列表主页面)修改按钮操作
    handleUpdate(row) {
      var that=this;
      this.reset();
      this.getUserList(); //加载用户表格
      const deviceId = row.deviceId
      getDevice(deviceId).then(response => {
        console.log("根据id获取设备详情返回值==",response);
        that.form = response.data;
        //给地图数据赋值
        that.model.lng=that.form.longitude;
        that.model.lat=that.form.latitude;
        console.log("执行修改操作之获取设备详细信息给地图数据赋值==",that.model.lng,that.model.lat);
        that.initMap(that.model.lng,that.model.lat,"modi");
        //给2个过渡数组赋值
        that.extDeviceInfoDescList=that.form.extDeviceInfoDescList;
        //将数组每一项中的name属性的值中的 “&lt;” 转换为 “<”
        if(that.extDeviceInfoDescList!=null){
          for(var i=0;i<that.extDeviceInfoDescList.length;i++){
            var obj=that.extDeviceInfoDescList[i];
            var ttt=obj.name.replace(/&lt;/g, "<");
            console.log("转换后的结果==",ttt);
            obj.name=ttt;
          }
        }

        that.deviceOwnerList=that.form.deviceOwnerList;
        console.log("修改弹框中模板过渡数组==",that.extDeviceInfoDescList);
        console.log("修改弹框中用户过渡数组==",that.deviceOwnerList);
        this.open = true;
        this.title = "修改设备";
      });
    },
    //(设备列表主页面)删除按钮操作
    handleDelete(row) {
      const deviceId = row.deviceId ;
      this.$modal.confirm('是否确认删除这个设备？').then(function() {
        return delDevice(deviceId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    //(设备列表主页面)导出按钮操作
    handleExport() {
      // this.download('erh-api/erh-iot/device/export', {
      //   ...this.queryParams
      // }, `device_${new Date().getTime()}.xlsx`)
      // exportDeviceList().then(response => {
      //     console.log("导出设备列表接口返回值==",response);
      // });
    },
    //定时器轮询接口
    handleDetect(row) {
      var that=this;
      console.log("传来的行数据==",row);
      this.title_timer=row.devName+"设备自检";
      this.open_timer=true;
      var query={
        "title":"sensorDigital",
        "devName":row.devName,
        "recent":30,
      }
      that.int_timer=setInterval(()=>{
        // if(this.countdown_num>0){
        // 	this.countdown_num--;
        //   //
        // }else{
        // 	clearInterval(that.int_timer);//终止定时器
        // }

        //
        if(that.isDetected){
          clearInterval(that.int_timer); //终止定时器
        }
        listEvent(query).then(response => {
          console.log("设备定时监测接口返回值==",response.rows);
          var arr=response.rows;
          if(arr.length>0){ //还需要加上callBody=="测试"  这个条件
            for(var i=0;i<arr.length;i++){
              if(arr[i].callBody.indexOf("测试")!=-1){
                that.isDetected=true;
                break;
              }
            }
          }
          console.log("handleTest方法的定时器执行中that.int_timer==",that.int_timer,that.isDetected,new Date());
        });

      },2000); //每隔10秒执行一次

    },
    /*******************************以上是设备相关方法************************************/

    /*****************************以下是设备模板相关方法**********************************/
    //查询设备模板列表（用于添加与修改时的下拉填充）
    getList_DeviceMould() {
      var param={
        "type":"model",
      };
      listDeviceMould(param).then(response => {
          console.log("获取设备模板列表接口返回值==",response);
          this.deviceMouldList = response.data;
      });
    },
    //列表中根据模板id获取模板名称
    getDevM_name(devMId){
      var devMName="";
      for(var i=0;i<this.deviceMouldList.length;i++){
        var item=this.deviceMouldList[i];
        if(item.devMId==devMId){
          devMName=item.devMName;
          break;
        }
      }
      return devMName;
    },
    //模板下拉框选中事件触发
    getSelect_name_value(devMId){
      console.log("执行下拉选择触发，参数devMId==",devMId);
      this.form.extDeviceInfoDescList=[];
      this.extDeviceInfoDescList=[];
      //根据id取模板明细
      getDeviceMould(devMId).then(response => {
          console.log("获取指定devMId设备模板详情接口返回值==",response);
          //给form中的数组对象赋值，并能动态显示键值对
          this.form.extDeviceInfoDescList=response.data.extDeviceInfoDescList;
          this.extDeviceInfoDescList=response.data.extDeviceInfoDescList;
          console.log("动态部分==",this.extDeviceInfoDescList);
      });
    },
    /*****************************以上是设备模板相关方法**********************************/

    /*******************************以下是用户相关方法************************************/
    //获取所属部门下拉数据
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    //添加新用户
    handleAdd_user(){
      this.reset_addUser();
      getUser().then(response => {
        console.log("handleAdd方法中getUser调用返回值==",response);
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.open_addUser= true;
        this.title_addUser = "添加用户";
        this.form_addUser.password = this.initPassword;
      });
    },
    submitForm_addUser: function() {
      console.log("submitForm_addUser方法正式提交前的form_addUser==",this.form_addUser);
      this.$refs["form_addUser"].validate(valid => {
        if (valid) {
          addUser(this.form_addUser).then(response => {
            this.$modal.msgSuccess("新增用户成功");
            this.open_addUser=false;
            this.getUserList();
          });
        }
      });
    },
    cancel_addUser(){ //取消添加用户
      this.open_addUser=false;
      this.reset_addUser();
    },
    reset_addUser(){ //添加用户表单重置
      this.form_addUser={
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form_addUser");
    },

    //点击行
    clickUserRow(row) {
      console.log("点选的行数据",row);
      var userId=row.userId;
      //需要比对集合中是否已经存在了相同的数据
      //this.deviceOwnerList
      var num=0;
      for(var i=0;i<this.deviceOwnerList.length;i++){
        if(userId==this.deviceOwnerList[i].ownerId){
          num++;
        }
      }
      if(num==0){
        var obj={};
        var nickName=row.nickName;
        var phonenumber=row.phonenumber;
        obj.ownerId=row.userId;
        obj.remark=nickName+"#"+phonenumber;
        obj.ownerType="login";
        obj.deptId=row.deptId; //新补充的
        this.deviceOwnerList.push(obj);
      }
    },
    //移除选中的绑定人信息
    delUser(index) {
    	let that=this;
      console.log("删除前==",that.deviceOwnerList,index);
      this.$modal.confirm('是否要移除这个绑定的用户？').then(function() {
        that.deviceOwnerList.splice(index, 1);
        console.log("删除后==",that.deviceOwnerList);
        return ;
      }).then(() => {
        this.$modal.msgSuccess("移除成功");
      }).catch(() => {});
    },
    //获取人员列表（根据条件查询用户列表）
    getUserList() {
      listUser(this.user_queryParams).then(response => {
          this.userList = response.rows;
          this.user_total = response.total;
        }
      );
    },
    //搜索按钮操作
    handleQuery_user() {
      this.user_queryParams.pageNum = 1;
      this.getUserList();
    },
    /** 重置按钮操作 */
    resetQuery_user() {
      this.resetForm("user_queryForm");
      this.deviceOwnerList=[]; //过渡用关联用户集合初始化
      this.handleQuery_user();

    },
    /*******************************以上是用户相关方法************************************/

    /*****************************以下是页面弹框相关方法**********************************/
    //弹框取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.resetQuery_user();
    },
    //表单重置
    reset() {
      this.form = {
        extDeviceInfoDescList: [], //模板键值对数组初始化
        deviceOwnerList: [], //关联用户集合初始化
        longitude: "", //经度
        latitude: "", //纬度
        status: "able", //默认可用
      };
      this.extDeviceInfoDescList=[];
      this.deviceOwnerList=[];
      this.resetForm("form");
      this.model= {
        lng: "",
        lat: "",
      };
    },
    //弹框点击提交按钮
    submitForm: function() {
      var that=this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          that.form.extDeviceInfoDescList=that.extDeviceInfoDescList;
          that.form.deviceOwnerList=that.deviceOwnerList;
          console.log("提交时的form==",that.form);
          if (this.form.deviceId != undefined) {
            updateDevice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDevice(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel_timer(){
      this.open_timer=false;
      //销毁定时器
      if(this.int_timer){
      	clearInterval(this.int_timer);
      }
      console.log("cancel_timer方法中this.int_timer==",this.int_timer);
      this.isDetected=false;
      this.countdown_num=30;
    },
    /*****************************以上是页面弹框相关方法**********************************/

    /*****************************以下是地图操作相关方法**********************************/
    createMap ({BMap, map}) {
      console.log("执行地图初始化");
      this.BMap=BMap;
      this.map=map;
      // 百度地图API功能
      // this.location.lng=117.414961; //定义地图中心点（在添加状态无数据时，默认为蓟州区政府）
      // this.location.lat=40.051539;
      this.location.lng=this.model.lng==""?117.414961:this.model.lng;
      this.location.lat=this.model.lat==""?40.051539:this.model.lat;
      this.zoom=15; //缩放，市区15基本上就可以看附近的一些街道了，蓟州区需要调整为16
      var that= this;
      map.addEventListener('click',function(e){ //定义地图点击取经纬度事件
        console.log("地图点击处事件e==",e);
        that.model.lng=e.point.lng;
        that.model.lat=e.point.lat;
        that.form.longitude=e.point.lng;
        that.form.latitude=e.point.lat;
        console.log("当前点击的经纬度==",that.model.lng,that.model.lat);
        console.log("当前点击的经纬度form==",that.form.longitude,that.form.latitude);
      })
    },

    //以下方法是测试初始化
    initMap(lng,lat,flag){
      console.log('初始化map==',this.map);
      console.log('initMap的参数==',lng,lat,flag);
      var that=this;
      if(this.map!=null){
        this.map.setZoom(15);

        //下面的代码为强制刷新属性值
        this.location={
          lng: lng,
          lat: lat,
        };
        this.location={...this.location};
        if(flag=="add"){
          this.model={
            lng: "",
            lat: "",
            address: "",
          };
        }
        if(flag=="modi"){
          this.model={
            lng: lng,
            lat: lat,
            address: "",
          };
        }
        this.model={...this.model};
        //上门的代码为强制刷新属性值

        var point=new this.BMap.Point(lng,lat);
        this.map.panTo(point);

        // 设置地图中心点
        // var point = new this.BMap.Point(lng,lat);
        // this.map.centerAndZoom(point, 15);

        // var marker =new this.BMap.Marker(point);
        // this.map.addOverlay(marker);
      }
    },

    /*****************************以上是地图操作相关方法**********************************/

  }
};
</script>
<style scoped>
  .user_line{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .user_item{
    width: 20%;
    height: 40px;
    color: #808080;
    font-size: 26rpx;
    line-height: 40px;
    text-align: center;
    font-family: MicrosoftYaHei;
    font-weight: bold;
  }
  .line1{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    text-align: left;
    line-height: 50px;
  }
  .line2{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    font-family: MicrosoftYaHei;
    font-weight: bolder;
    text-align: left;
    line-height: 80px;
  }
  .space_line{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /*不可被压缩*/
  }

  /*用于地图中的搜索框的样式*/
  .map_serach_input{
    width: 300px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #dddee1;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
  }
</style>
